<template>
  <div>
    <el-card>
      <!-- 查询 -->
      <el-form
        :data="search"
        label-width="80px"
        size="small"
        class="order-search"
      >
        <el-form-item label="订单号">
          <el-input v-model="search.orderNo" placeholder="订单号"></el-input>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="search.consignee" placeholder="收货人"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="search.phone" placeholder="手机号"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select v-model="search.orderState" placeholder="请选择">
            <el-option label="已受理" value="已受理"></el-option>
            <el-option label="已完成" value="已完成"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择时间">
          <el-date-picker
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="search.date"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
          <el-button
            @click="searchorder"
            :disabled="dis"
            class="btn"
            type="primary"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 内容 -->
      <el-table
        :data="tableData"
        border
        style="width: 90%"
        :style="{ width: w + 'px' }"
      >
        <el-table-column
          fixed
          prop="orderNo"
          label="订单号"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="orderTime"
          label="下单时间"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="consignee"
          label="收货人"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="deliverAddress"
          label="配送地址"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="deliveryTime"
          label="送达时间"
          width="160"
        ></el-table-column>
        <el-table-column
          prop="remarks"
          label="用户备注"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="orderAmount"
          label="订单金额"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="orderState"
          label="订单状态"
          width="120"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button type="text" @click="openorder(scope.row)" size="small"
              >查看</el-button
            >
            <el-button type="text" @click="handleEdit(scope.row)" size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="sizechange"
        @current-change="pagechange"
        :current-page="currentPage"
        :page-sizes="[1, 3, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <!-- 模态框 -->
    <el-dialog width="350px" title="商品修改" :visible.sync="dialogVisible">
      <el-form size="mini" :model="editFormData">
        <el-form-item label="订单号" :label-width="formLabelWidth">
          <el-input
            v-model="editFormData.orderNo"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="下单时间" :label-width="formLabelWidth">
          <el-input
            v-model="editFormData.orderTime"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="editFormData.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="收货人" :label-width="formLabelWidth">
          <el-input
            v-model="editFormData.consignee"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="配送地址" :label-width="formLabelWidth">
          <el-input
            v-model="editFormData.deliverAddress"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="送达时间" :label-width="formLabelWidth">
          <el-input
            v-model="editFormData.deliveryTime"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="用户备注" :label-width="formLabelWidth">
          <el-input
            v-model="editFormData.remarks"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单金额" :label-width="formLabelWidth">
          <el-input
            v-model="editFormData.orderAmount"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单状态" :label-width="formLabelWidth">
          <el-input
            v-model="editFormData.orderState"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 模态框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible2"
      width="50%"
      :before-close="handleClose"
      center
    >
      <span>订单详情</span>
      <div class="opendata">
        <span>订单号:{{ openData.orderNo }}</span>
        <span>下单时间:{{ openData.orderTime }}</span>
        <span>手机号:{{ openData.phone }}</span>
        <span>收货人:{{ openData.consignee }}</span>
        <span>配送地址:{{ openData.deliverAddress }}</span>
        <span>送达时间:{{ openData.deliveryTime }}</span>
        <span>订单金额:{{ openData.orderAmount }}</span>
        <span>订单状态:{{ openData.orderState }}</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible2 = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { normalizeDate } from "@/utils/utils.js";
import { orderlist, orderedit, orderdetail } from "@/apis/order.js";
export default {
  data() {
    return {
      dis: false,
      search: {
        orderNo: "",
        consignee: "",
        phone: "",
        orderState: "",
        date: [],
      },
      openData: {},
      dialogVisible2: false,
      tableData: [],
      editFormData: {},
      dialogVisible: false, // 模态框显示或隐藏
      formLabelWidth: "80px",
      w: document.body.clientWidth - 260,
      currentPage: 1, // 当前页
      pageSize: 5, //每页条数
      total: 0, // 总数据条数
    };
  },
  methods: {
    //获取数据函数
    getData() {
      orderlist({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        orderNo: this.search.orderNo,
        consignee: this.search.consignee,
        phone: this.search.phone,
        orderState: this.search.orderState,
        date: JSON.stringify(this.search.date),
      })
        .then((res) => {
          let { data } = res.data;

          //处理格式
          data.forEach((item) => {
            item.orderTime = normalizeDate(item.orderTime);
            item.deliveryTime = normalizeDate(item.deliveryTime);
          });
          this.tableData = res.data.data;
          this.total = res.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //查看模态框
    openorder(row) {
      this.dialogVisible2 = true;
      this.openData = row;
    },
    //当前页
    sizechange(val) {
      this.pageSize = val;
      this.getData();
    },
    //切换页面
    pagechange(val) {
      this.currentPage = val;
      this.getData();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
        })
        .catch(() => {});
    },
    //查询
    searchorder() {
      this.dis = true;
      setTimeout(() => {
        this.dis = false;
      }, 2000);
      console.log(this.search);
      this.getData();
    },
    //编辑
    handleEdit(row) {
      // console.log(row);
      this.dialogVisible = true;
      orderdetail({ id: row.id }).then((res) => {
        this.editFormData = res.data.data;
      });
    },
    //请求修改
    saveEdit() {
      orderedit(this.editFormData)
        .then((res) => {
          console.log(res.data);
          this.dialogVisible = false;
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.getData();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style lang="less" scoped>
.order-search {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    margin-right: 10px;
  }
  .btn {
    margin-left: 10px;
  }
}
.el-input {
  width: 200px;
}
/deep/.el-dialog__body {
  display: flex;
  flex-wrap: wrap;
}
.opendata {
  span {
    margin: 10px;
  }
}
</style>